<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文本基础CSS属性</title>
</head>
<body>
  <style>
    div >p:nth-of-type(1) {
      font-weight: bolder;
      color: red;
    }
    /* 示例1 */
    img.top { vertical-align: text-top;}
    img.bottom { vertical-align: text-bottom;}
    img.middle { vertical-align: middle;}
    
    /* 示例2 */
    p.right { text-align: right; }
    p.center { text-align: center; }
    p.justify { text-align: justify;text-justify: inter-word; }
    p.last-center {
      font-size: 1.4em;
      text-align: justify;
      text-align-last: center;
      width: 720px;
    }
    
    /* 示例3 */
    p.indent { text-indent: 2em; width: 480px;}
    
    /* 示例4 */
    p.simple { text-shadow: 0 3px 3px green;}
    p.multiple { 
      text-shadow:
        1px 1px 2px black,
        0 0 0.1em blue,
        0 0 0.2em blue;
      color: white;
    }
    
    /* 示例5 */
    p.capitalize { text-transform: capitalize; }
    p.uppercase { text-transform: uppercase; }
    
    /* 示例6 */
    p.under { text-decoration: underline red; }
    p.over { text-decoration: wavy overline lime;}
    p.line { text-decoration: line-through;}
    p.plain { text-decoration: none;}
    p.underover { text-decoration: dashed underline overline;}
    p.thick { text-decoration: solid underline purple 4px;}
    p.blink { text-decoration: blink;}
    
    /* 示例7 */
    span.double-circle { text-emphasis: filled double-circle #ffb703; }
    span.custom { text-emphasis: 'x' red; }
    
    /* 示例8 */
    p.upright {
      height: 150px;
      writing-mode: vertical-rl;
      text-orientation: upright;
      border: 1px solid lightcoral;
    }
    
    /* 示例9 */
    .overflow {
      display: flex;
      justify-content: space-around;
    }
    .overflow > div > p {
      width: 200px;
      border: 1px solid;
      padding: 2px 5px;
      /* Both of the following are required for text-overflow */
      white-space: nowrap;
      overflow: hidden;
    }
    p.overflow-clip { text-overflow: clip; }
    p.overflow-ellipsis { text-overflow: ellipsis; }
    p.overflow-string { text-overflow: " [..]"; }
    .ltr > p { direction: ltr; }
    .rtl > p { direction: rtl; }
    </style>
    
    <div> <p> 示例1.vertical-align 垂直对齐</p>
      <div> An <img src="./frame_image.svg" alt="link" width="32" height="32" /> image with a default alignment.</div>
      <div> An<img class="top" src="./frame_image.svg" alt="link" width="32" height="32" /> image with a text-top alignment. </div>
      <div> An <img class="bottom" src="./frame_image.svg" alt="link" width="32" height="32" />image with a text-bottom alignment.</div>
      <div> An<img class="middle" src="./frame_image.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div>
    </div>
    
    <div> <p> 示例2.text-align | text-align-last 水平对齐</p>
      <p class="right">右对齐,右对齐,右对齐,右对齐</p>
      <p class="center">居中对齐,居中对齐,居中对齐,居中对齐</p>
      <p class="justify">两端对齐,两端对齐,两端对齐,两端对齐</p>
      <p class="last-center">指定一行或者块中的最后一行在被强制换行之前的对齐，作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
    </div>
    
    <div> <p> 示例3.text-indent 首行缩进两个字符</p>
      <p class="indent">首行缩进两个字符,作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
    </div>
    
    <div> <p> 示例4.text-shadow 文本阴影</p>
      <p class="simple">简单文本阴影,作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
      <p class="multiple">多重文本阴影,作者【 WeiyiGeek 】是一个计算机技术狂热者，喜欢接触新鲜事务，不断学习，充实自己，实现自己人生价值。</p>
    </div>
    
    <div> <p> 示例5.text-transform 英文字母、拉丁语言大小写</p>
      <p> 原始文本: weiyigeek is a computer technology enthusiast </p>
      <p class="capitalize">首字母大写：weiyigeek is a computer technology enthusiast</p>
      <p class="uppercase">全字母大写：weiyigeek is a computer technology enthusiast</p>
    </div>
    
    <div>
      <p>示例6.text-decoration 设置文本上的装饰性线条的外观</p>
      <p class="under">此文本下方有一行线。</p>
      <p class="over">此文本上面有一行线。</p>
      <p class="line">此文本有一条线穿过它。</p>
      <p>此<a class="plain" href="#">链接不会具有下划线</a>，因为链接默认加下划线。移除锚点上的文本装饰时要小心，因为用户通常依赖下划线来表示超链接</p>
      <p class="underover">此文本在其上方<em>和</em>下方都有线条。</p>
      <p class="thick">在浏览器支持的情况下，此文本具有非常粗的紫色下划线。</p>
      <p class="blink">此文本可能会为你闪烁，具体取决于你使用的浏览器。</p>
    </div>
    
    <div>
      <p>示例7.text-emphasis 设置文本上的标记</p>
      <p>此文本<span class="double-circle">weiyigeek</span>上方有一行双圆。</p>
      <p>此文本<span class="custom">weiyigeek</span>上面有自定义字符标识。</p>
    </div>
    
    <div>
      <p>示例8.text-orientation 设定行中字符的方向</p>
      <p class="upright">weiyigeek is a computer technology enthusiast.</p>
    </div>
    
    <div class="overflow">
      <p>示例9.text-overflow 存在溢出内容时显示效果。</p>
      <div class="ltr">
        <h2>Left to right text</h2>
        <pre>clip</pre>
        <p></p>
        <p class="overflow-clip"> weiyigeek is a computer technology enthusiast. </p>
        <pre>ellipsis</pre>
        <p class="overflow-ellipsis"> weiyigeek is a computer technology enthusiast. </p>
        <pre>" [..]"</pre>
        <p class="overflow-string">weiyigeek is a computer technology enthusiast. </p>
      </div>
      <div class="rtl">
        <h2>Right to left text</h2>
        <pre>clip</pre>
        <p></p>
        <p class="overflow-clip">weiyigeek is a computer technology enthusiast.</p>
        <pre>ellipsis</pre>
        <p class="overflow-ellipsis">weiyigeek is a computer technology enthusiast.</p>
        <pre>" [..]"</pre>
        <p class="overflow-string">weiyigeek is a computer technology enthusiast.</p>
      </div>
    </div>
    
    <div>
      <p>示例10.text-wrap 控制如何换行元素中的文本。</p>
      <p class="wrap" contenteditable="true"> The default behavior; the text in the heading wraps "normally"</p>
      <p class="nowrap" contenteditable="true">In this case the text in the heading doesn't wrap, and overflows the container</p>
      <p class="balance" contenteditable="true"> In this case the text in the heading is nicely balanced across lines</p>
    </div>
</body>
</html>